<template>
	<!-- 我的/个人空间 -->
	<view class="user-space wrap-card">
		<!-- 头像栏 -->
		<view class="header flex items-center border-b pb-20">
			<image v-if="chooseAvatar" class="header-img" :src="chooseAvatar" mode="aspectFit"></image>
			<image v-else class="header-img" src="/static/img/header/c.png" mode="aspectFit"></image>
			<view class="pl-30 flex-1">
				<view class="flex items-center mb-20">
					<view class="flex-1 flex flex-col items-center justify-center">
						<text class="font-bold text-32">{{tarFollows}}</text>
						<text class="text-26">关注</text>
					</view>
					<view class="flex-1 flex flex-col items-center justify-center">
						<text class="font-bold text-32">{{tarFans}}</text>
						<text class="text-26">粉丝</text>
					</view>
				</view>
				<view class="follow_button" :hidden="ifMySpace ? true : false">
					<button @click="goToFollow()">{{followTitle}}</button>
					<!-- <u-button :customStyle="btnStyle" :ripple="true" @click="goToFollow()" style="width: 30rpx;"></u-button> -->
				</view>
			</view>
		</view>

		<!-- 列表内容 -->
		<template v-if="tabIndex === 0">
			<view class="p-30 border-b">
				<view class="text-30 mb-20">
					账号信息
				</view>
				<view class="text-28">
					昵称：<text class="text-gray-500">{{tarName}}</text>
				</view>
				<view class="text-28">
					账号ID：<text class="text-gray-500">{{tarId}}</text>
				</view>
			</view>
			<view class="p-30 border-b">
				<view class="text-30 mb-20">
					个人信息
				</view>
				<view class="text-28 my-10">
					星座：<text class="text-gray-500">魔杰座</text>
				</view>
				<view class="text-28 my-10">
					兴趣：<text class="text-gray-500">旅游</text>
				</view>
				<view class="text-28 my-10">
					故乡：<text class="text-gray-500">中国</text>
				</view>
				<view class="text-28 my-10">
					简介：
					<text class="text-gray-500">你的倒影是我带不走的风景，就像居无定所的云还在旅行！</text>
				</view>
			</view>
			<view class="p-30 border-b">
				<view class="text-30 mb-20">
					展示成就
				</view>
				<view class="text-28 my-10">
					成就：<text class="text-gray-500">社区名师</text>
				</view>
			</view>
<!-- 			<view class="p-30 border-b">
				<view class="flex justify-center items-center text-30 py-20" hover-class="bg-gray"
					@click="() => goToChat(tarId)">
					<text class="iconfont iconliaotian "></text>马上聊天
				</view>
			</view> -->
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifMySpace: false,
				tarId: '',
				tarName: '',
				tarFans: 0,
				tarFollows: 0,
				chooseAvatar: '',
				followTitle: '',
				isFollow: false,
				showPopup: false,
				// 按钮配置
				btnStyle: {
					width: "120rpx",
					height: "60rpx",
					borderRadius: '10rpx',
					background: "linear-gradient(-45deg,#01906c,#34D399)",
					color: "#FFFFFF",
					fontSize: "30rpx",
				},
				// 导航标签
				tabIndex: 0,
				tabList: [{
					name: "主页",
				}],
			}
		},
		computed: {
			list() {
				return this.tabList[this.tabIndex].list
			},
			loadStatus() {
				return this.tabList[this.tabIndex].loadStatus
			}
		},
		onShow() {
			console.log(getApp().globalData.chooseTarId);
			console.log(getApp().globalData.chooseAvatar);
			console.log(getApp().globalData.chooseTarName);
			this.tarId = getApp().globalData.chooseTarId;
			this.tarName = getApp().globalData.chooseTarName;
			this.chooseAvatar = getApp().globalData.chooseAvatar;
			this.checkIsFollow();
			this.getUserInfo();
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
					// 打开菜单功
					this.showPopup = true
					break
			}
		},
		methods: {
			// tabbar点击
			changeTab(index) {
				this.tabIndex = index
				this.swiperIndex = index
			},
			checkIsFollow() {
				uni.request({
					url: 'http://localhost:8081/follow/or/not/' + this.tarId,
					header: {
						'Access-Control-Allow-Headers': 'appId',
						'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
						'Access-Control-Max-Age': 86400,
						'Authorization': '' + wx.getStorageSync('sessionID')
					},
					method: 'GET',
					success: res => {
						console.log('检查是否关注成功');
						console.log(res);
						this.isFollow = res.data.data;
						if (this.isFollow == true) {
							this.followTitle = '已关注';
						} else if (this.isFollow == false) {
							this.followTitle = '关注';
						}
						console.log('关注状态:' + this.isFollow);
					},
					fail: res => {
						console.log('检查是否关注失败');
					}
				})
				if(this.tarId == wx.getStorageSync('myID')){
					this.ifMySpace = true;
				} else {
					this.ifMySpace = false;
				}
			},
			goToFollow() {
				uni.request({
					// url: 'http://localhost:8081/follow/' + this.tarId + '/' + this.isFollow,
					url: 'http://localhost:8081/follow/foc/' + this.tarId,
					header: {
						'Access-Control-Allow-Headers': 'appId',
						'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
						'Access-Control-Max-Age': 86400,
						'Authorization': '' + wx.getStorageSync('sessionID')
					},
					method: 'POST',
					success: res => {
						if (this.isFollow == false) {
							this.tarFans = this.tarFans + 1;
							console.log('关注成功');
							this.followTitle = '已关注';
							this.isFollow = true;
							console.log(this.tarId);
							console.log(res);
							const concerns = wx.getStorageSync('myFollowsNumber');
							wx.setStorageSync('myFollowsNumber', concerns + 1);
							uni.showToast({
								title: '关注成功',
								icon: 'none',
								duration: 2000
							})
						} else {
							this.tarFans = this.tarFans - 1;
							console.log('取关成功');
							this.followTitle = '关注';
							this.isFollow = false;
							console.log(this.tarId)
							console.log(res);
							const concerns = wx.getStorageSync('myFollowsNumber');
							wx.setStorageSync('myFollowsNumber', concerns - 1);
							uni.showToast({
								title: '取关成功',
								icon: 'none',
								duration: 2000
							})
						}
					},
					fail: res => {
						console.log('关注失败');
						console.log(res);
						uni.showToast({
							title: '关注成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			goToChat(tarId) {
				uni.navigateTo({
					url: '/pagesA/msg/chat'
				})
			},
			getUserInfo() {
				uni.request({
					url: 'http://localhost:8081/user/of/' + this.tarId,
					header: {
						'Access-Control-Allow-Headers': 'appId',
						'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
						'Access-Control-Max-Age': 86400,
						'Authorization': '' + wx.getStorageSync('sessionID')
					},
					method: 'GET',
					success: res => {
						console.log('获取他人信息成功');
						console.log(res);
						this.tarFans = res.data.data.fans;
						this.tarFollows = res.data.data.followee;
					},
					fail: res => {
						console.log('获取他人信息失败');
						console.log(res);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-space {
		.header {
			position: relative;

			.header-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 100%;
			}

			.handle-icon {
				position: absolute;
				right: -10rpx;
				top: -20rpx;
				color: #fff;
				background: #4B5563;
				opacity: 0.8;
				padding: 12rpx;
				border-radius: 100%;
			}
		}

		.nav-center {
			height: 80rpx;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			background-color: #fff;

			.nav-title {
				height: 80rpx;
				line-height: 80rpx;
				width: 120rpx;
				font-size: 30rpx;
				padding: 0 15rpx;
				font-weight: bold;
				color: $uni-text-color-gray;
			}

			.active {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.nav-title {
					color: $uni-color-green;
				}
			}

			.follow_button {
				width: 100rpx;
				height: 50rpx;
				text-align: center;
				/* 文字居中 */
				color: #ffffff;
				/* 文字颜色为白色 */
				background-color: #12a77b;
				/* 按钮背景颜色为 #12a77b */
			}
		}
	}
</style>